<template>
	<view class="content" style="">
		<view class="itemline-text" style="">自动撇防</view>
		<view class="DrivingContent" style="">
		  <!-- 内容 -->
			<view class="Driving-itemline" style="">
				<view class="itemline-content" >
					<view >
						靠近自动撇防
					</view>
					<view class="bottom"  style="">
						手机靠近坐骑，自动撇防
					</view>
				</view>
				<view>
					<view>
						<switch style="transform:scale(0.7)" checked @change="switch1Change" />
					</view>
				</view>
			</view>
			<view class="Driving-itemline" style="">
				<view class="itemline-content">
					<view >
						靠近自动点火启动
					</view>
					<view class="bottom"  style="">
						手机靠近坐骑，自动点火启动
					</view>
				</view>
				<view>
					<view>
						<switch style="transform:scale(0.7)" checked @change="switch1Change" />
					</view>
				</view>
			</view>
			<view class="Driving-itemline" style="padding: 20rpx 40rpx;">
				<view class="itemline-content" >
					<view >
						撤防距离
					</view>
					<view class="bottom"  style="">
						约两米左右撤防
					</view>
				</view>
				<view class="Driving-right" style="">
				  <text style="">恢复</text>
				  
				</view>
			</view>
			<view class="" style="display: flex;width: 100%;box-sizing: border-box;padding:0 40rpx;">
				<view class="" style="padding: 0 2.5%;">
					近
				</view>
				<view class="percent-box" style="width: 80%;box-sizing: border-box;padding: 0 20rpx;">
						<!-- max、min不传默认 0-100 -->
					<bestjhh-movable-area max='100' min='0' v-model="bestValue" @change='changebest'></bestjhh-movable-area>
				</view>
				<view class="" style="padding: 0 2.5%;">
					远
				</view>
			</view>
			<view class="bottom" style="padding: 0 40rpx;padding-bottom: 20rpx;">
				（蓝牙信号不稳定，不同环境的撤防距离可能不同）
			</view>
		</view>
		<view class="itemline-text" style="">自动设防</view>
		<view class="DrivingContent">
			
			<view class="Driving-itemline" style="">
				<view class="itemline-content" >
					<view >
						拉开自动设防
					</view>
					<view class="bottom"  style="">
						手机远离坐骑，自动设防
					</view>
				</view>
				<view>
					<view>
						<switch style="transform:scale(0.7)" checked @change="switch1Change" />
					</view>
				</view>
			</view>
		</view>
		<view style="" class="itemline-text">乘坐感应</view>
		<view class="DrivingContent">
			
			<view class="Driving-itemline" style="">
				<view class="itemline-content" >
					<view >
						乘坐感应
					</view>
					<view class="bottom"  style="">
						开启后,坐骑可感应检测是否有人乘坐，感应失灵后，关闭后仍可正常运行
					</view>
				</view>
				<view>
					<view>
						<switch style="transform:scale(0.7)" checked @change="switch1Change" />
					</view>
				</view>
			</view>
			<view class="Driving-itemline" style="padding: 20rpx 40rpx;">
				<view class="itemline-content" >
					<view >
						离座自动设防
					</view>
					<view class="bottom"  style="">
						离开座椅自动熄火设防功能关闭
					</view>
				</view>
				<view class="Driving-right" style="">
				  <text style="">关闭</text>
				  
				</view>
			</view>
			<view class="bottom" style="padding: 0 40rpx;padding-bottom: 20rpx;">
				（以上配置仅限对支持乘坐感应的设备有效）
			</view>
		</view>
		<view style="" class="itemline-text">驻车感应</view>
		<view class="DrivingContent">
			
			<view class="Driving-itemline" style="">
				<view class="itemline-content" >
					<view >
						驻车感应
					</view>
					<view class="bottom"  style="">
						开启后，车辆可感应检测边撑是否撑起，关闭后仍可常运行
					</view>
				</view>
				<view>
					<view>
						<switch style="transform:scale(0.7)" checked @change="switch1Change" />
					</view>
				</view>
			</view>
			
			<view class="bottom" style="padding: 0 40rpx;padding-bottom: 20rpx;">
				（以上配置仅限对支持驻车感应的设备有效）
			</view>
		</view>
		<view style="" class="itemline-text">其他安全配置</view>
		<view class="DrivingContent" style="">
		  <!-- 内容 -->
			<view class="Driving-itemline" style="">
				<view class="itemline-content" >
					<view >
						设防状态可使用钥匙点火
					</view>
					<view class="bottom"  style="">
						设防状态可正常使用钥匙点火
					</view>
				</view>
				<view>
					<view>
						<switch style="transform:scale(0.7)" checked @change="switch1Change" />
					</view>
				</view>
			</view>
			
			<view class="bottom" style="padding: 0 40rpx;padding-bottom: 20rpx;">
				震动感应灵敏度
			</view>
				
			<view class="" style="display: flex;width: 100%;box-sizing: border-box;padding:0rpx 40rpx;padding-bottom: 30rpx;">
				<view class="" style="padding: 0 2.5%;">
					弱
				</view>
				<view class="percent-box" style="width: 80%;box-sizing: border-box;padding: 0 20rpx;">
						<!-- max、min不传默认 0-100 -->
					<bestjhh-movable-area max='100' min='0' v-model="bestValue" @change='changebest'></bestjhh-movable-area>
				</view>
				<view class="" style="padding: 0 2.5%;">
					强
				</view>
			</view>
			
		</view>
	</view>
</template>

<script>
export default {
	data() {
	    return {
	        multiple:0,//倍数
	        percent:0, //百分比
		    phoneNumber:'10086',
		    temperature:55,
			bestValue:50
			}
		},
		 components:{},
		methods: {
			changebest(e){
				console.log(e)
			    
			    
			}
		}
	}
</script>

<style lang="scss" scoped>
.content{
	padding: 30rpx;
	height: 100vh;
	overflow: scroll;
	box-sizing: border-box;
}
.itemline-text{
	margin: 40rpx 0 20rpx 0;font-size: 26rpx;color: #848484;font-size: 24rpx;
}
.bottom{
					font-size: 20rpx;color: #afafaf;margin-top: 10rpx;
				}
.DrivingContent{
		font-size: 26rpx; border-radius: 20rpx; box-shadow: 0 -4rpx 10rpx rgba(181, 181, 181, 0.3), 0 4rpx 10rpx rgba(181, 181, 181, 0.3);

		.Driving-itemline{
			display: flex;justify-content: space-between;padding: 20rpx 40rpx;
			.itemline-content{
				.bottom{
					font-size: 20rpx;color: #afafaf;margin-top: 10rpx;
				}
			}
			.Driving-input{
				position: relative; width: 70%;box-sizing: border-box;
				.iconfont{
					position: absolute; left: 2%; top: 50%; 
					transform: translateY(-50%); font-size: 40rpx; color: gray;
				}
				input{
					padding-left: 60rpx; height: 60rpx; 
					font-size: 28rpx; border: 1px solid #ccc;
					border-radius: 50rpx;
				}
			}
			.Driving-left{
				.bottom{
					font-size: 20rpx;color: #afafaf;margin-top: 10rpx;
				}
			}
			.Driving-right{
				display: flex; justify-content: center; align-items: center; padding: 10rpx;
				text{
					line-height: 25rpx; color: #a5a5a5;
				}
				.iconfont{
					font-size: 25rpx; margin-left: 5rpx;
				}
			}
		}
	}
</style>
